{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
<link href="__ZUI__/lib/sortable/zui.sortable.css" rel="stylesheet">
<style>
#sortableList > .list-group-item {cursor: move}
#sortableList > .list-group-item.dragging {
  visibility: visible;
  opacity: .3;
}
</style>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>拖放排序</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<article><p>拖放排序可以允许用户在目标容器内拖动子元素来排序这些子元素。</p><div class="alert alert-danger">
  <h4>不兼容触摸屏</h4>
  <p>无法在触摸屏上完成拖拽功能。</p>
</div><p>拖动时会在文档中插入被拖动元素的<strong>影子元素</strong>，会跟随鼠标光标位置，用于指示当前拖动的位置。</p></article>

<section><header><h3>综合示例</h3></header><article><h4>引入资源</h4><p>拖放排序为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/sortable/zui.sortable.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><h4>示例</h4><p>下面的例子中可以通过拖放来重新排序列表组中的项目。</p><div class="example">
  <div class="list-group" id="sortableList">
    <div class="list-group-item" data-order="0"><i class="icon-move"></i> 猫咪</div>
    <div class="list-group-item" data-order="1"><i class="icon-move"></i> 小鸡</div>
    <div class="list-group-item" data-order="2"><i class="icon-move"></i> 大黄</div>
    <div class="list-group-item" data-order="3"><i class="icon-move"></i> 鹅鹅鹅</div>
    <div class="list-group-item" data-order="4"><i class="icon-move"></i> 猪王</div>
  </div>
  <button type="button" class="btn btn-primary" id="addMonkeyToSortableList"><i class="icon icon-plus"></i> 添加一只猴子</button>
</div>

<pre class="prettyprint prettyprinted" style="">
  <code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"sortableList"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-move"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 猫咪</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-move"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 小鸡</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-move"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 大黄</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-move"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 鹅鹅鹅</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-move"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 猪王</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-css"><span class="com">/* 为可拖动的条目应用可移动光标类型 */</span><span class="pln">
</span><span class="com">#sortableList &gt; .list-group-item {cursor: move}</span><span class="pln">

</span><span class="com">/* 为正在被拖动的条目应用半透明外观 */</span><span class="pln">
</span><span class="com">#sortableList &gt; .list-group-item.dragging {</span><span class="pln">
  visibility</span><span class="pun">:</span><span class="pln"> visible</span><span class="pun">;</span><span class="pln">
  opacity</span><span class="pun">:</span><span class="pln"> </span><span class="pun">.</span><span class="lit">3</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#sortableList'</span><span class="pun">).</span><span class="pln">sortable</span><span class="pun">();</span></code></pre></article></section>





<section><header><h3>选项</h3></header><article><p>在进行初始化时允许传入一个对象或者使用 <code>[data-*]</code> 属性参数作为初始化选项。可以使用的选项如下：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>选项</th>
      <th>名称</th>
      <th>可选值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>selector</code></td>
      <td>可拖动元素选择器</td>
      <td>默认 <code>'div,li'</code></td>
      <td>使用 jQuery 选择器来指定容器内的哪些元素可以被拖动排序。</td>
    </tr>
    <tr>
      <td><code>trigger</code></td>
      <td>拖动事件触发元素选择器</td>
      <td>默认为 <code>''</code></td>
      <td>用于选择被拖动元素内部元素的选择器，如果指定该选项，则仅当鼠标在指定的子元素上点按鼠标会触发拖动事件。</td>
    </tr>
    <tr>
      <td><code>reverse</code></td>
      <td>是否反向排序</td>
      <td>默认为 <code>false</code></td>
      <td>如果设置为 <code>true</code>，则按照 <code>order</code> 从大到小排序。</td>
    </tr>
    <tr>
      <td><code>dragCssClass</code></td>
      <td>用于被拖动元素的类</td>
      <td>默认 <code>'invisible'</code></td>
      <td>当一个元素正在被拖动时，该选项设置的类会被添加到原元素上。</td>
    </tr>
    <tr>
      <td><code>sortingClass</code></td>
      <td>拖动时添加的类（1.6+）</td>
      <td>默认 <code>'sortable-sorting'</code></td>
      <td>当有元素被拖动时添加到父级元素上的类。</td>
    </tr>
    <tr>
      <td><code>dropToClass</code></td>
      <td>拖动时添加到拖动元素上的类</td>
      <td>默认 <code>'drop-to'</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>stopPropagation</code></td>
      <td>是否阻止元素上的事件冒泡</td>
      <td>默认 <code>false</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>mouseButton</code></td>
      <td>响应的鼠标按钮</td>
      <td>默认为 <code>'all'</code></td>
      <td>
        <p>所有可响应的鼠标按钮参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button" target="_blank"><code>MouseEvent.button</code></a>：</p>
        <ul>
          <li><code>'all'</code> 或 <code>-1</code>：响应所有鼠标按键；</li>
          <li><code>'left'</code> 或 <code>0</code>：响应鼠标左键；</li>
          <li><code>'middle'</code> 或 <code>1</code>：响应鼠标滚轮（中键）；</li>
          <li><code>'right'</code> 或 <code>2</code>：响应鼠标右键。</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>start</code></td>
      <td>拖动前回调函数</td>
      <td>默认不设置</td>
      <td>指定一个回调函数在拖动发生前（<code>mousedown</code> 事件发生时）调用。</td>
    </tr>
    <tr>
      <td><code>order</code></td>
      <td>顺序发生变化的回调函数</td>
      <td>默认不设置</td>
      <td>指定一个回调函数在拖动元素过程中子元素顺序发生变化时调用。</td>
    </tr>
    <tr>
      <td><code>finish</code></td>
      <td>拖动完成回调函数</td>
      <td>默认不设置</td>
      <td>指定一个回调函数在拖动完成后（<code>mouseup</code> 事件发生时）调用。</td>
    </tr>
  </tbody>
</table></div><p>使用选项：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 定义选项对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> options </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'.sortable-item'</span><span class="pun">,</span><span class="pln">
    finish</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'排序完成：'</span><span class="pun">,</span><span class="pln"> e</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="com">// 设置更多选项...</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

</span><span class="com">// 初始化时传入选项参数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#sortableList'</span><span class="pun">).</span><span class="pln">sortable</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span></code></pre></article></section>




<section><header><h3>处理拖放排序过程</h3></header><article><p>通过选项设置 <code>start</code>、<code>order</code>、<code>finish</code> 的回调函数来处理整个拖动过程，并实时获取拖动的位置。</p><h4><span class="code">start(e)</span></h4><p><code>start(e)</code> 回调函数在拖动发生之前调用，用于处理拖动前的操作。</p><h4><span class="code">order(e)</span></h4><p><code>order(e)</code> 回调函数在拖动时且子元素发生顺序变化时被调用，该回调函数参数 <code>e</code> 包含的属性定义如下：</p><ul>
<li><code>e.list</code>：已当前顺序返回所有可拖动元素；</li>
<li><code>e.element</code>：当前正在被拖动的元素。</li>
</ul><h4><span class="code">finish(e)</span></h4><p><code>finish(e)</code> 拖动完成时被调用。该回调函数参数 <code>e</code> 拥有 <code>order</code> 回调函数参数的所有属性。</p><h4><span class="code">$().sortable('destroy')</span></h4><p>如果以确定不需要拖放排序操作，则可以调用 <code>$().sortable('destroy')</code> 来销毁拖放排序插件。销毁之后如果需要重新启用拖放排序则重新进行初始化即可。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#dragDropEles'</span><span class="pun">).</span><span class="pln">sortable</span><span class="pun">(</span><span class="str">'destroy'</span><span class="pun">);</span></code></pre><h4>获取排序后的元素数组</h4><ul>
<li><span class="code">$().data('zui.sortable').getItems()</span></li>
<li><span class="code">$().data('zui.sortable').getItems(onlyElements)</span></li>
</ul><p>如果为 <code>onlyElements</code> 参数设置为 <code>true</code>，仅返回 jQuery 元素数组，如果不设置此参数或者设置为 <code>false</code>，则返回如下对象组成的数组。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pun">{</span><span class="pln">
    item</span><span class="pun">,</span><span class="pln">  </span><span class="com">// 被排序的元素</span><span class="pln">
    order  </span><span class="com">// 当前元素顺序</span><span class="pln">
</span><span class="pun">}</span></code></pre></article></section></div>
</section>
{/block}

{block name="script"}
<script src="__ZUI__/lib/sortable/zui.sortable.js"></script>

<script>
$(function() {
    var $list = $('#sortableList').sortable({
        // trigger: '.icon-move' // only effect by drag the move icon
    });
    var monkeyId = 1;
    $('#addMonkeyToSortableList').on('click', function() {
        $list.append('<div class="list-group-item"><i class="icon-move"></i> 猴子 <strong>' + (monkeyId++) + '</strong></div>');
    });
});
</script>
{/block}